<template>
  <e-dialog ref="dialog" :title="title" width="400px" :defaultFooter="false">
    <el-form :model="form" class="e-form">
      <el-form-item>
        <el-input
          v-model="form.customerName"
          placeholder="客户姓名">
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="form.contact"
          placeholder="客户联系电话"
          :maxlength="11">
          <i slot="prefix" class="el-input__icon el-icon-phone"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="form.address"
          placeholder="工程详情地址">
          <i slot="prefix" class="el-input__icon el-icon-location-outline"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="form.area"
          placeholder="工程面积">
          <i slot="prefix" class="el-input__icon el-icon-menu"></i>
          <span slot="suffix">m²</span>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="form.period"
          placeholder="施工工期">
          <i slot="prefix" class="el-input__icon el-icon-s-flag"></i>
          <span slot="suffix">天</span>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="form.templateId">
          <el-radio-button v-for="(item, index) in template"
            :key="index"
            :label="item.id">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="form-item-btn">
        <el-button :loading="loading" class="long-btn" type="primary" @click="handleForm">保存</el-button>
      </el-form-item>
    </el-form>
  </e-dialog>
</template>

<script>
import eDialog from '@/components/dialog';
import {addProject, editProject, findTemplates} from '@/utils/api';
import storage from '@/utils/storage';
export default {
  components: {eDialog},
  data () {
    return {
      title: '新建工程',
      loading: false,
      form: {},
      template: [],
      userValue: {}
    }
  },
  created () {
    this.userValue = storage.getItem('user_value');
    findTemplates().then((res) => {
      this.template = res;
    })
  },
  methods: {
    openDialog (obj) {
      if (obj) {
        this.form = Object.assign({}, obj);
        this.title = '编辑工程';
      } else {
        this.form = {};
        this.title = '新建工程';
      }
      this.$refs.dialog.openDialog();
    },
    handleForm () {
      const params = Object.assign({}, this.form, {adminId: this.userValue.id});
      if (!params.customerName) {
        this.$message.warning('请填写客户名称');
        return false;
      }
      if (!params.contact) {
        this.$message.warning('请填写客户联系电话');
        return false;
      }
      if (!params.address) {
        this.$message.warning('请填写工程详细地址');
        return false;
      }
      if (!params.area) {
        this.$message.warning('请填写工程面积');
        return false;
      }
      if (!params.period) {
        this.$message.warning('请填写施工工期');
        return false;
      }
      if (!params.templateId) {
        this.$message.warning('请选择模板');
        return false;
      }
      this.loading = true;
      if (params.id) {
        editProject(params).then((res) => {
          this.loading = false;
          this.$refs.dialog.closeDialog();
          this.$message.success('编辑成功');
          this.$emit('handleSuccess');
        }).catch((err) => {
          this.loading = false;
        })
      } else {
        addProject(params).then((res) => {
          this.loading = false;
          this.$refs.dialog.closeDialog();
          this.$message.success('创建成功');
          this.$emit('handleSuccess');
        }).catch((err) => {
          this.loading = false;
        })
      }
    }
  }
}
</script>